<template>
  <div class="contact-card">
    <!-- 经纪人信息 -->
    <div class="agent-info">
      <el-avatar :src="getFullImageUrl(agent.avatar)" :size="64" class="agent-avatar" />
      <div class="agent-basics">
        <h3>{{ agent.name || '未知经纪人' }}</h3>
        <p>{{ agent.title || '房产顾问' }}</p>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="contact-methods">
      <!-- 在线咨询 -->
      <el-button type="primary" @click="handleStartChat">
        <el-icon><ChatDotRound /></el-icon> 在线咨询
      </el-button>
      
      <!-- 电话联系 -->
      <div v-if="agent.phone" class="method-item">
        <el-icon><Phone /></el-icon>
        <span>{{ agent.phone }}</span>
        <el-button type="text" @click="copyToClipboard(agent.phone)">
          <el-icon><CopyDocument /></el-icon>
        </el-button>
      </div>
      
      <!-- 预约看房 -->
      <el-button 
        v-if="showAppointment && houseId" 
        @click="handleMakeAppointment"
        type="success"
      >
        <el-icon><Calendar /></el-icon> 预约看房
      </el-button>
      
      <!-- 微信联系 -->
      <template v-if="agent.wechat">
        <div class="method-item">
          <el-icon><ChatDotSquare /></el-icon>
          <span>{{ agent.wechat }}</span>
          <el-button type="text" @click="copyToClipboard(agent.wechat)">
            <el-icon><CopyDocument /></el-icon>
          </el-button>
        </div>
        
        <el-button v-if="agent.wechatQrCode" @click="showQrCode = true" type="info">
          <el-icon><View /></el-icon> 查看微信二维码
        </el-button>
      </template>
    </div>

    <!-- 微信二维码弹窗 -->
    <el-dialog
      v-model="showQrCode"
      title="微信二维码"
      width="300px"
      center
      destroy-on-close
    >
      <div class="qrcode-wrapper">
        <img :src="getFullImageUrl(agent.wechatQrCode)" alt="微信二维码" class="qrcode" />
        <p>扫描添加经纪人微信</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ChatDotRound, 
  Phone, 
  CopyDocument, 
  Calendar, 
  ChatDotSquare, 
  View
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useLoginStore } from '@/stores/login'
import { getFullImageUrl } from '@/utils/imageUrl'

const props = defineProps({
  // 经纪人信息
  agent: {
    type: Object,
    required: true
  },
  // 房源ID
  houseId: {
    type: [Number, String],
    default: null
  },
  // 是否显示预约看房按钮
  showAppointment: {
    type: Boolean,
    default: true
  }
})

// 定义可触发的事件
const emit = defineEmits(['start-chat'])

const userStore = useUserStore()
const loginStore = useLoginStore()
const router = useRouter()
const showQrCode = ref(false)

// 检查登录状态
const checkLoginStatus = () => {
  // 检查用户是否已登录
  const isLoggedIn = userStore.isLoggedIn
  
  if (!isLoggedIn) {
    // 使用loginStore打开登录弹窗，这是Pinia风格
    loginStore.showLogin()
    return false
  }
  
  return true
}

// 开始聊天
const handleStartChat = () => {
  if (!checkLoginStatus()) return
  
  // 触发事件通知父组件
  emit('start-chat')
  
  // 检查是否有有效的经纪人ID
  if (!props.agent.id) {
    ElMessage.warning('无法找到经纪人信息，请稍后再试')
    return
  }
  
  // 优先使用chatUserId，如果没有则使用经纪人ID
  const chatUserId = props.agent.chatUserId || props.agent.userId || props.agent.id
  
  // 跳转到聊天页面
  router.push({
    path: '/chat',
    query: {
      agentId: props.agent.id,
      targetUserId: chatUserId, // 添加目标用户ID
      agentName: props.agent.name,
      agentAvatar: props.agent.avatar,
      ...(props.houseId ? { houseId: props.houseId } : {})
    }
  })
}

// 预约看房
const handleMakeAppointment = () => {
  if (!checkLoginStatus()) return
  
  if (!props.houseId) {
    ElMessage.warning('缺少房源信息，无法预约')
    return
  }
  
  // 检查是否有有效的经纪人ID
  if (!props.agent.id) {
    ElMessage.warning('无法找到经纪人信息，请稍后再试')
    return
  }
  
  // 跳转到预约页面
  router.push({
    path: '/appointment',
    query: {
      houseId: props.houseId,
      agentId: props.agent.id
    }
  })
}

// 复制到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      ElMessage.success('已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}
</script>

<style lang="scss" scoped>
.contact-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  
  .agent-avatar {
    border: 2px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .agent-basics {
    h3 {
      font-size: 20px;
      color: #1a1a1a;
      margin: 0 0 6px 0;
      font-weight: 600;
    }
    
    p {
      color: #666;
      margin: 0;
      font-size: 14px;
    }
  }
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    
    &.is-text {
      height: auto;
    }
  }
  
  .method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #eee;
    
    .el-icon {
      color: #4A60A1;
      font-size: 20px;
    }
    
    span {
      flex: 1;
      color: #333;
      font-size: 15px;
    }
  }
}

.qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .qrcode {
    width: 220px;
    height: 220px;
    object-fit: contain;
    margin-bottom: 16px;
    border: 1px solid #eee;
    padding: 8px;
    border-radius: 8px;
  }
  
  p {
    color: #666;
    font-size: 14px;
  }
}

/* 修复el-dialog样式 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .el-dialog__title {
      font-weight: 600;
      font-size: 18px;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
}
</style> 